<template>
  <div id="footerBar">
    <div class="footer_main">
      <ul>
        <li>
          <div class="title">相关生态</div>
          <div class="item">
            <span>BF-Design-Admin</span>
          </div>
        </li>
        <li>
          <div class="title">帮助</div>
          <div class="item">
            <span>更新日志</span>
          </div>
          <div class="item">
            <span>常见问题</span>
          </div>
          <div class="item">
            <a href="https://gitee.com/Buried-LoveBoy/bf-design-ui/issues" target="_black">
              <span>Gitee-issues</span>
            </a>
          </div>
          <div class="item">
            <span>GitHub-issues</span>
          </div>
        </li>
        <li>
          <div class="title">
            <img src="../assets/svg/contribution.svg" alt />
            贡献指南
          </div>
          <div class="item-scroll">
            <div class="item">
              <img src="../assets/svg/github-foot.svg" alt />
              <span>@Buried-LoveBoy</span>
            </div>
            <div class="item">
              <img src="../assets/svg/gitee-foot.svg" alt />
              <span>@Buried-LoveBoy</span>
            </div>
            <!-- https://gitee.com/weiLZ598 -->
            <div class="item">
              <a href="https://gitee.com/weiLZ598" target="_black">
                <img src="../assets/svg/github-foot.svg" alt />
                <span>@weiLZ598</span>
              </a>
            </div>
            <div class="item">
              <a href="https://gitee.com/weiLZ598" target="_black">
                <img src="../assets/svg/gitee-foot.svg" alt />
                <span>@weiLZ598</span>
              </a>
            </div>
            <!-- <div class="item">
              <img src="../assets/svg/github-foot.svg" alt />
              <span>@weiLZ598</span>
            </div>
            <div class="item">
              <img src="../assets/svg/gitee-foot.svg" alt />
              <span>@weiLZ598</span>
            </div>
            <div class="item">
              <img src="../assets/svg/github-foot.svg" alt />
              <span>@weiLZ598</span>
            </div>
            <div class="item">
              <img src="../assets/svg/gitee-foot.svg" alt />
              <span>@weiLZ598</span>
            </div>
            <div class="item">
              <img src="../assets/svg/github-foot.svg" alt />
              <span>@weiLZ598</span>
            </div>
            <div class="item">
              <img src="../assets/svg/gitee-foot.svg" alt />
              <span>@weiLZ598</span>
            </div>-->
          </div>
          <div v-if="this.$route.name != 'joinLabour'" class="item" @click="toJoinLabour">
            <img src="../assets/svg/join.svg" alt />
            <span>参与贡献</span>
          </div>
        </li>
        <li>
          <div class="title">
            <img src="../assets/svg/more.svg" alt />
            其他开源
          </div>
          <div class="item">
            <span>WeChatApplet</span>
          </div>
        </li>
      </ul>
      <div class="footer_bottom">
        <div class="bottom_container">🦄✨BF-Design-Ui</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "footerBar",
  components: {},
  data() {
    return {};
  },
  computed: {},
  methods: {
    toJoinLabour() {
      this.$router.push({
        path: "/zh-CN/guide/joinLabour",
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang='scss'>
#footerBar {
  width: 100%;
  min-height: 300px;
  background-color: #000;
  overflow: hidden;
  .footer_main {
    max-width: 1280px;
    margin: 0 auto;
    margin-top: 70px;
    background-color: #000;
    ul {
      display: flex;
      justify-content: space-between;
      text-align: left;
      li {
        width: 24.5%;
        list-style: none;
        min-width: 250px;
        .title {
          position: relative;
          width: 100%;
          height: 40px;
          line-height: 40px;
          font-size: 18px;
          font-weight: bold;
          color: #fff;
          img {
            position: absolute;
            left: 80px;
            top: 10px;
            width: 20px;
            height: 20px;
          }
        }
        .item-scroll {
          min-height: 60px;
          max-height: 165px;
          overflow-y: auto;
          &::-webkit-scrollbar {
            display: none;
            width: 5px;
            height: 5px;
          }
          &::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0);
            border-radius: 25px;
          }
          &::-webkit-scrollbar-thumb {
            background: rgba(239, 239, 239, 0.5);
            border-radius: 25px;
          }
          &:hover.item-scroll::-webkit-scrollbar {
            display: block;
          }
        }
        .item {
          display: flex;
          align-items: center;
          width: 100%;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          color: #999;
          cursor: pointer;
          span {
            height: 30px;
            line-height: 30px;
            &:hover {
              transition: 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
              color: #fff;
            }
          }

          img {
            width: 16px;
            height: 16px;
            margin-right: 5px;
          }
        }
      }
    }
  }
  .footer_bottom {
    height: 65px;
    margin-top: 20px;
    .bottom_container {
      max-width: calc(100% - 120px);
      height: 100%;
      text-align: center;
      line-height: 65px;
      font-size: 14px;
      color: #999;
      border-top: 1px solid rgba(255, 255, 255, 0.25);
    }
  }
  a {
    color: #999;
  }
}
</style>